@import '../common/style/index.less';

@picker: ~'@{prefix}-picker';

@picker-border-radius: var(--td-picker-border-radius, 24rpx);
@picker-toolbar-height: var(--td-picker-toolbar-height, 116rpx);

@picker-cancel-color: var(--td-picker-cancel-color, @text-color-secondary);
@picker-confirm-color: var(--td-picker-confirm-color, @brand-color);
@picker-button-font-size: var(--td-picker-button-font-size, 32rpx);

@picker-title-font-size: var(--td-picker-title-font-size, 36rpx);
@picker-title-font-weight: var(--td-picker-title-font-weight, 600);
@picker-title-line-height: var(--td-picker-title-line-height, 52rpx);
@picker-title-color: var(--td-picker-title-color, @text-color-primary);

@picker-bg-color: var(--td-picker-bg-color, @bg-color-container);
@picker-mask-color-top: var(--td-picker-mask-color-top, hsla(0, 0%, 100%, 0.92));
@picker-mask-color-bottom: var(--td-picker-mask-color-bottom, hsla(0, 0%, 100%, 0.4));

@picker-indicator-bg-color: var(--td-picker-indicator-bg-color, @bg-color-secondarycontainer);
@picker-indicator-border-radius: var(--td-picker-indicator-border-radius, 12rpx);

.@{picker} {
  position: relative;
  background-color: @picker-bg-color;
  border-top-left-radius: @picker-border-radius;
  border-top-right-radius: @picker-border-radius;

  &__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    height: @picker-toolbar-height;
  }

  &__title {
    flex: 1;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: @picker-title-color;
    line-height: @picker-title-line-height;
    font-weight: @picker-title-font-weight;
    font-size: @picker-title-font-size;
  }

  &__cancel,
  &__confirm {
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    font-size: @picker-button-font-size;
    height: 100%;
    padding: 0 32rpx;
  }

  &__cancel {
    color: @picker-cancel-color;
  }

  &__confirm {
    color: @picker-confirm-color;
  }

  &__main {
    position: relative;
    display: flex;
    justify-content: center;
    padding-left: 64rpx;
    padding-right: 64rpx;
  }

  &__mask {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 3;
    backface-visibility: hidden;
    pointer-events: none;
    height: 96rpx;

    &--top {
      top: 0;
      background: linear-gradient(180deg, @picker-bg-color 0%, transparent 100%);
    }

    &--bottom {
      bottom: 0;
      background: linear-gradient(180deg, @picker-bg-color 0%, transparent 100%);
      transform: matrix(1, 0, 0, -1, 0, 0);
    }
  }

  &__indicator {
    position: absolute;
    left: 32rpx;
    right: 32rpx;
    top: 144rpx;
    pointer-events: none;
    background-color: @picker-indicator-bg-color;
    border-radius: @picker-indicator-border-radius;
  }
}
